連續練習了幾天的 HTML 標籤，草莓開始覺得有點無聊了。

「熊熊啊～這些標籤我大概都知道怎麼使用了，可是一點樣式和顏色都沒有，學起來好沒勁啊。」草莓抱怨說著。
「很好很好～終於發現了！接下來我們就來聊聊網頁樣式的語言吧！」熊熊說。

「之前我們說過，HTML 語言定義出來的是網頁的架構。」

「只有文字架構的 HTML 看起來非常單調，所以這時候就需要樣式語言 CSS 來幫網頁加點色彩～」

「熊熊可以拿一些 HTML 當作例子示範一下嗎？」草莓央求說。
「當然沒有問題～」
「我們先來看看一個簡單的 div 結構吧。」

<div>
  <p>我是草莓</p>
</div>

「嗯嗯，這個我知道是什麼意思，那樣式應該怎麼加上去呢？」草莓問。
「以現行的規範之下，我們如果想在網頁結構增添 CSS 樣式，有幾種常見的方式，像是加上 class 或是 id。」

<div>
  <p class="strawberry">我是草莓</p>
  <p id="strawberry_id">我是草莓</p>
</div>

「咦，這兩個有什麼不同嗎？」
「class 是較為通用的寫法，而且可以重複出現在不同元素上使用，但是 id 是具有唯一性的，一但某個元素使用之後，就不應該在頁面上其他元素作使用了喔！」
「了解！」草莓說。

「那如果我想把第一個 p 標籤的文字變大的話，用 CSS 的話應該怎麼做呢？」
「沒問題，我們可以這樣寫。」

.strawberry {
  font-size: 32px;
}

「喔喔字真的變大了耶！不過 px 是什麼意思呢？」
「px 是一種常用的單位，就是 pixel 的意思，以網頁預設的文字大小而言通常會是 16px，這裡我們改成 32px，所以看起來會明顯變大很多喔！」
「那如果想改顏色或是改成粗體顯示呢？」
「也很簡單，這樣改寫就可以了。」

.strawberry {
  font-size: 32px;
  color: #2ab6fb;
  font-weight: bolder;
}

「補充說明一下，color 後的屬性是 16 進位的色碼，是其中一種顯示方式，你可能也看過 rgb 或是 rgba 的形式，其實都是代表顏色的意思。而 font-weight 從字面意義上看也很明顯是針對字體粗細做調整的屬性，預設情況下是 normal，調粗調細也有 light 和 bolder 可以做選擇喔！」

「好奇怪喔，第二個 p 標籤怎麼樣式改不動呀？」草莓看著筆電納悶。
「喔～這是因為 id 的寫法是不ㄧ樣的喔！應該要改成這樣。」

#strawberry_id {
  font-size: 32px;
  color: #2ab6fb;
  font-weight: bolder;
}

「喔喔！所以id 要用 #，class 用 . 就可以了～」草莓豁然開朗。
「沒錯沒錯～」熊熊點頭說。

「多了樣式語言的幫助，寫網頁感覺變得更有趣了呢！」草莓開心地說。

明日待續～